<template>
  <el-table
    :data="props.list"
    v-loading="props.listLoading"
    style="width: 100%"
    v-bind="{ ...props.elementTableConfigs }"
  >
    <slot name="prepend" />
    <el-table-column
      v-for="item in props.listConfig"
      :key="item.prop"
      v-bind="{ ...item }"
    />
    <slot name="append" />
  </el-table>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'

const props = defineProps({
  list: {
    type: Array as PropType<any[]>,
    required: true
  },
  listConfig: {
    type: Array as PropType<any[]>,
    required: true
  },
  listLoading: {
    type: Boolean as PropType<true | false>,
    required: true
  },
  elementTableConfigs: {
    type: Object as PropType<Record<string, any>>,
    default: () => {}
  }
})
</script>

<style lang="scss" scoped>
.content-space {
  display: flex;
  :deep(.content-space__item) {
    width: 100%;
  }
}
</style>
